<template>
  	<scroll
  		ref="suggest"
	  	class="suggest"
	  	:data="result"
	  	:pullup="pullup"
	  	:beforeScroll="beforeScroll"
	  	@scrollToEnd="searchMore"
	  	@beforeScroll="listenScroll"
  	>
		<ul class="suggest-list">
			<li
				v-for="(item, index) in result"
				:key="index"
				class="suggest-item"
				@click="select(item)"
			>
				<div class="icon">
					<i :class="getIconCls(item)"></i>
				</div>
				<div class="name">
					<p class="text" v-html="getDisplayName(item)"></p>
				</div>
			</li>
			<loading v-show="hasMore"></loading>
		</ul>
		<div class="no-result-wrapper" v-show="!result.length && !hasMore">
			<no-result></no-result>
		</div>
	</scroll>
</template>

<script>
	import Scroll from '@/base/scroll/scroll';
	import Loading from '@/base/loading/loading';
	import NoResult from '@/base/no-result/no-result';
	import { processSongs } from '@/service/song';
	import { search } from '@/service/search';
	import { mapMutations, mapActions } from 'vuex';

  	export default {
		name: 'Suggest',
		props: {
			query: {
				type: String,
				default: ''
			},
			showSinger: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				page: 1,
				result: [],
				pullup: true,
				beforeScroll: true,
				hasMore: true
			}
		},
		watch: {
			query() {
				this.result = [];
				this.page = 1;
				this.hasMore = true;
				this.$refs.suggest.scrollTo(0, 0);
				this.search();
			}
		},
		methods: {
			search() {
				if (this.query.trim().length === 0) {
					this.result = [];
					this.hasMore = false;
					return;
				}
				search(this.query, this.page, this.showSinger).then(res => {
					if (res) {
						this.hasMore = res.hasMore;
						if (res.singer) {
							this.result.push(res.singer);
						}
						if (res.songs.length) {
							res.songs.forEach(song => {
								this.result.push(song);
							});
						}
					}
					for (let i = 1; i < this.result.length; i++) {
						if (this.result[i].id === this.result[0].id) {
							this.result.splice(i, 1);
						}
					}
					this._checkMore(res);
				});
			},
			searchMore() {
				if (!this.hasMore) return;
				this.page++;
				this.search();
			},
			listenScroll() {
				this.$emit('listScroll');
			},
			getDisplayName(item) {
				if (!item.duration) {
					return item.name;
				} else {
					return `${item.singer}-${item.name}`;
				}
			},
			getIconCls(item) {
				if (!item.duration) {
					return 'icon-mine';
					
				} else {
					return 'icon-music';
				}
			},
			_checkMore(data) {
				if (!data.hasMore) {
					this.hasMore = false;
				}
			},
			refresh() {
				this.$refs.suggest.refresh();
			},
			select(item) {
				// 点击歌手跳转到歌手详情页
				if (!item.duration) {
					const singer = {
						id: item.id,
						mid: item.mid,
						name: item.name,
						pic: item.pic
					};
					this.setSinger(singer);
					this.$router.push(`/search/${singer.mid}`);
				} else {
					// 插入新歌曲
					processSongs([item]).then(res => {
						this.insertSong(res[0]);
						this.setCurrentSong(res[0]);
					});
				}
				this.$emit('select');
			},
			...mapMutations({
				setSinger: 'SET_SINGER',
				setCurrentSong: 'SET_CURRENT_SONG'
			}),
			...mapActions(['insertSong'])
		},
		components: {
			Scroll,
			Loading,
			NoResult
		}
	}
</script>

<style lang="stylus" scoped>
  	@import '../../common/stylus/variable'
  	@import '../../common/stylus/mixin'
	
	.suggest
		height: 100%
		overflow: hidden
		.suggest-list
			padding: 0 30px
			.suggest-item
				display: flex
				align-items: center
				padding-bottom: 20px
				.icon
					flex: 0 0 30px
					width: 30px
					[class^='icon-']
						font-size: 14px
						color: $color-text-d
				.name
					flex 1
					font-size: $font-size-medium
					color: $color-text-d
					overflow: hidden
					.text
						no-wrap()
		.no-result-wrapper
			position: absolute
			width: 100%
			top: 50%
			transform: translateY(-50%)
</style>